import React, { useState, useEffect } from'react';
import './qjx_hz.css';
import { useNavigate } from "react-router-dom";
import { RightOutline } from 'antd-mobile-icons'

const PatientList = () => {
    // 存储患者信息的状态
    const [patients, setPatients] = useState(() => {
        const storedPatients = localStorage.getItem('patients');
        return storedPatients? JSON.parse(storedPatients) : [];
    });

    // 模拟添加患者信息的函数，实际应用中数据可能来自表单
    const addPatient = (newPatient) => {
        const newPatientWithId = { id: Date.now(), ...newPatient };
        const updatedPatients = [...patients, newPatientWithId];
        setPatients(updatedPatients);
        localStorage.setItem('patients', JSON.stringify(updatedPatients));
    };

    // 删除患者信息的函数
    const deletePatient = (patientId) => {
        const updatedPatients = patients.filter(patient => patient.id!== patientId);
        setPatients(updatedPatients);
        localStorage.setItem('patients', JSON.stringify(updatedPatients));
    };

    const navigate = useNavigate();

    return (
        <div className="qq_patient-list-container">
            <div className="qq_header">
                <span className="qq_back-icon" onClick={() => navigate('/home/mind')}>&#8249;</span>
                <h2>患者信息</h2>
                <span className="qq_add-icon" onClick={() => navigate('/qjx_huan')}>+</span>
            </div>
            <div className="qq_info-tip">
                <span className="qq_tip-icon">&#9888;</span>
                请认真填写信息，以便医生给出准确的治疗建议，信息仅医生可见
            </div>
            {patients.map(patient => {
                // 计算年龄
                const birthDate = new Date(patient.birthDate);
                const age = new Date().getFullYear() - birthDate.getFullYear();

                return (
                    <div key={patient.id} className="qq_patient-card">
                        <div className="qq_patient-info">
                            <span>{patient.patientName}</span>
                            <span>{patient.gender}</span>
                            <span>{age}岁</span>
                        </div>
                        <span className="qq_delete-icon" onClick={() => deletePatient(patient.id)}>
                            &#128465;
                        </span>
                        <div className="qq_patient-details">
                            <p>身份证号码：{patient.idNumber}</p>
                            <p>过敏史：{patient.allergyHistory}  疾病史：{patient.medicalHistory}</p>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default PatientList;